{% extends 'news/base.html' %}

{% block titleBlock %}
<title>文章详情页</title>
{% endblock %}

{% block scriptBlock %}
<!--<script type="text/javascript" src="../../static/news/js/main.js"></script>-->
<script type="text/javascript" src="../../static/news/js/detail.js"></script>
{% endblock %}

{% block contentBlock %}
<div class="detail_con fl">
    <h3>{{ data.news_info.title }}</h3>
    <div class="detail_about clearfix">
        <span class="time_souce fl">{{ data.news_info.create_time }} 来源: {{ data.news_info.source}}</span>
        <span class="comment fr">{{ data.news_info.comments_count }}</span>
    </div>

    <p class="summary">
        {{ data.news_info.digest }}
    </p>
    {{ data.news_info.content | safe }}

    <a href="javascript:;" class="collection block-center" data-newid="{{ data.news_info.id }}"
       style="display: {% if data.is_collected %} none {% else %} block {% endif %}">收藏</a>
    <a href="javascript:;" class="collected block-center" data-newid="{{ data.news_info.id }}"
       style="display: {% if data.is_collected %} block {% else %} none {% endif %}"><span class="out">已收藏</span><span
            class="over">取消收藏</span></a>
    {% if data.user_info %}
    <form action="" class="comment_form" data-newsid="{{ data.news_info.id }}">
        <div class="person_pic">
            <img src="../../static/news/images/cat.jpg" alt="用户图标">
        </div>
        <textarea placeholder="请发表您的评论" class="comment_input"></textarea>
        <input type="submit" name="" value="评 论" class="comment_sub">
    </form>
    {% else %}
    <div class="comment_form_logout">
        登录发表你的评论
    </div>
    {% endif %}


    <div class="comment_count">
        {{ data.news_info.comments_count }}条评论
    </div>

    <div class="comment_list_con">

        {% for comment in data.comments %}
        <div class="comment_list">
            <div class="person_pic fl">
                {% if comment.user.avatar_url %}
                <img src="{{comment.user.avatar_url}}" alt="用户图标">
                {% else %}
                <img src="../../static/news/images/worm.jpg" alt="用户图标">
                {% endif %}

            </div>
            <div class="user_name fl">{{ comment.user.nick_name }}}</div>
            <div class="comment_text fl">
                {{ comment.content }}
            </div>
            {% if comment.parent %}
            <div class="reply_text_con fl">
                <div class="user_name2">{{ comment.parent.user.nick_name }}</div>
                <div class="reply_text">
                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。
                </div>
            </div>
            {% endif %}

            <div class="comment_time fl">{{comment.create_time}}</div>
            <a href="javascript:;" class="comment_up {% if comment.is_like %} has_comment_up {% endif %} fr"
               data-newsid="{{ comment.news_id }}" data-commentid="{{ comment.id }}"
               data-likecount="{{ comment.like_count }}">
                {% if comment.like_count >0 %}
                {{ comment.like_count }}
                {% else %}
                赞
                {% endif %}
            </a>
            <a href="javascript:;" class="comment_reply fr">回复</a>
            <from class="reply_form fl" data-newsid="{{ comment.news_id }}" data-commentid="{{ comment.id }}">
                <textarea class="reply_input"></textarea>
                <input type="submit" name="" value="回复" class="reply_sub fr">
                <input type="reset" name="" value="取消" class="reply_cancel fr">
            </from>
        </div>
        {% endfor%}

    </div>
</div>
{% endblock %}

{% block authorBlock %}
    {% if data.news_info.author %}
        <div class="author_card">
            {% if data.news_info.avatar_url %}
                <a href="#" class="author_pic"><img src="{{ data.news_info.author.avatar_url }}" alt="author_pic"></a>
            {% else %}
                <a href="#" class="author_pic"><img src="../../static/news/images/user_pic.png" alt="author_pic"></a>
            {% endif %}
            <a href="#" class="author_name">{{ data.news_info.author.nick_name}}</a>
            <div class="author_resume">{{ data.news_info.signature }}</div>
            <div class="writings"><span>总篇数</span><b>{{ data.news_info.news_count }}</b></div>
            <div class="follows"><span>粉丝</span><b>{{ data.news_info.followers_count }}</b></div>

            <a href="javascript:;" class="focus fr" data-userid="{{ data.news_info.author.id}}" style="display: {% if data.is_followed %} none {% else %} block {% endif %}">关注</a>

            <a href="javascript:;" class="focused fr" data-userid="{{ data.news_info.author.id}}" style="display: {% if data.is_followed %} block {% else %} none {% endif %}"><span class="out">已关注</span><span class="over">取消关注</span></a>


        </div>
    {% endif %}

{% endblock %}


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>文章详情页</title>-->
<!--    <link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css">-->
<!--    <link rel="stylesheet" type="text/css" href="../../static/news/css/main.css">-->
<!--    <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script>-->
<!--    <script type="text/javascript" src="../../static/news/js/detail.js"></script>-->
<!--    <script type="text/javascript" src="../../static/news/js/main.js"></script>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="header_con">-->
<!--        <div class="header">-->
<!--            <a href="#" class="logo fl"><img src="../../static/news/images/logo.png" alt="logo"></a>-->
<!--            <div class="user_btns fr">-->
<!--                <a href="javascript:;" class="login_btn">登录</a> / <a href="javascript:;" class="register_btn">注册</a>-->
<!--            </div>-->
<!--            &lt;!&ndash; 用户登录后显示下面，隐藏上面 &ndash;&gt;-->
<!--            <div class="user_login fr">-->
<!--                <img src="../../static/news/images/person01.png" class="lgin_pic">-->
<!--                <a href="#">用户张三</a>-->
<!--                <a href="#">退出</a>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    -->
<!--    <div class="conter_con">-->
<!--        <div class="detail_con fl">-->
<!--            <h3>{{ data.news_info.title }}</h3>-->
<!--            <div class="detail_about clearfix">-->
<!--                <span class="time_souce fl">{{ data.news_info.create_time }} 来源: {{ data.news_info.source}}</span>-->
<!--                <span class="comment fr">{{ data.news_info.comments_count }}</span>-->
<!--            </div>-->

<!--            <p class="summary">-->
<!--                {{ data.news_info.digest }}-->
<!--            </p>-->
<!--            {{ data.news_info.content | safe }}-->
<!--        <a href="javascript:;" class="collection block-center" data-newid="" >收藏</a>-->
<!--        <a href="javascript:;" class="collected block-center" data-newid="" style="display: none"><span class="out">已收藏</span><span class="over">取消收藏</span></a>-->
<!--        -->

<!--        <div class="comment_form_logout">-->
<!--            登录发表你的评论-->
<!--        </div>-->

<!--        <form action="" class="comment_form">-->
<!--            <div class="person_pic">-->
<!--                <img src="../../static/news/images/cat.jpg" alt="用户图标">-->
<!--            </div>-->
<!--            <textarea placeholder="请发表您的评论" class="comment_input"></textarea>-->
<!--            <input type="submit" name="" value="评 论" class="comment_sub">-->
<!--        </form>-->


<!--        <div class="comment_count">-->
<!--            4条评论-->
<!--        </div>-->
<!--        -->
<!--        <div class="comment_list_con">-->
<!--            <div class="comment_list">-->
<!--                <div class="person_pic fl">-->
<!--                    <img src="../../static/news/images/worm.jpg" alt="用户图标">-->
<!--                </div>    -->
<!--                <div class="user_name fl">用户张山</div>-->
<!--                <div class="comment_text fl">-->
<!--                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。-->
<!--                </div>-->
<!--                <div class="reply_text_con fl">-->
<!--                    <div class="user_name2">用户李思</div>-->
<!--                    <div class="reply_text">-->
<!--                        遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="comment_time fl">2017-01-01 00:00:00</div>-->
<!--                <a href="javascript:;" class="comment_up has_comment_up fr">1</a>-->
<!--                <a href="javascript:;" class="comment_reply fr">回复</a>-->
<!--                <from class="reply_form fl" data-newsid="" data-commentid="">-->
<!--                    <textarea  class="reply_input"></textarea>-->
<!--                    <input type="submit" name="" value="回复" class="reply_sub fr">-->
<!--                    <input type="reset" name="" value="取消" class="reply_cancel fr">-->
<!--                </from>            -->
<!--            </div>-->

<!--            <div class="comment_list">-->
<!--                <div class="person_pic fl">-->
<!--                    <img src="../../static/news/images/worm.jpg" alt="用户图标">-->
<!--                </div>    -->
<!--                <div class="user_name fl">用户张山</div>-->
<!--                <div class="comment_text fl">-->
<!--                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。-->
<!--                </div>-->
<!--                <div class="comment_time fl">2017-01-01 00:00:00</div>-->
<!--                <a href="javascript:;" class="comment_up fr">赞</a>-->
<!--                <a href="javascript:;" class="comment_reply fr">回复</a>-->
<!--                <from class="reply_form fl">-->
<!--                    <textarea  class="reply_input"></textarea>-->
<!--                    <input type="submit" name="" value="回复" class="reply_sub fr">-->
<!--                    <input type="reset" name="" value="取消" class="reply_cancel fr">-->
<!--                </from>            -->
<!--            </div>-->

<!--            <div class="comment_list">-->
<!--                <div class="person_pic fl">-->
<!--                    <img src="../../static/news/images/worm.jpg" alt="用户图标">-->
<!--                </div>    -->
<!--                <div class="user_name fl">用户张山</div>-->
<!--                <div class="comment_text fl">-->
<!--                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。-->
<!--                </div>-->
<!--                <div class="comment_time fl">2017-01-01 00:00:00</div>-->
<!--                <a href="javascript:;" class="comment_up fr">赞</a>-->
<!--                <a href="javascript:;" class="comment_reply fr">回复</a>-->
<!--                <from class="reply_form fl">-->
<!--                    <textarea  class="reply_input"></textarea>-->
<!--                    <input type="submit" name="" value="回复" class="reply_sub fr">-->
<!--                    <input type="reset" name="" value="取消" class="reply_cancel fr">-->
<!--                </from>            -->
<!--            </div>-->

<!--            <div class="comment_list">-->
<!--                <div class="person_pic fl">-->
<!--                    <img src="../../static/news/images/worm.jpg" alt="用户图标">-->
<!--                </div>    -->
<!--                <div class="user_name fl">用户张山</div>-->
<!--                <div class="comment_text fl">-->
<!--                    遏制茅台酒价格过快上涨，多渠道供给，就不一定要买，租茅台酒也可以的，租售同权。开发共有产权茅台酒，让老百姓喝得起茅台酒，饮者有其酒。-->
<!--                </div>-->
<!--                <div class="comment_time fl">2017-01-01 00:00:00</div>-->
<!--                <a href="javascript:;" class="comment_up fr">赞</a>-->
<!--                <a href="javascript:;" class="comment_reply fr">回复</a>-->
<!--                <from class="reply_form fl">-->
<!--                    <textarea  class="reply_input"></textarea>-->
<!--                    <input type="submit" name="" value="回复" class="reply_sub fr">-->
<!--                    <input type="reset" name="" value="取消" class="reply_cancel fr">-->
<!--                </from>            -->
<!--            </div>-->
<!--        </div>-->
<!--            -->
<!--            -->
<!--        </div>-->
<!--        <div class="rank_con fr">-->
<!--            <div class="author_card">-->
<!--                <a href="#" class="author_pic"><img src="../../static/news/images/user_pic.png" alt="author_pic"></a>-->
<!--                <a href="#" class="author_name">张大山</a>-->
<!--                <div class="author_resume">张大山的简介,张大山</div>-->
<!--                <div class="writings"><span>总篇数</span><b>23</b></div>-->
<!--                <div class="follows"><span>粉丝</span><b>36</b></div>-->
<!--                <a href="javascript:;" class="focus fr">关注</a>-->
<!--                <a href="javascript:;" class="focused fr"><span class="out">已关注</span><span class="over">取消关注</span></a>-->
<!--            </div>            -->
<!--            <div class="rank_title">-->
<!--                <h3>点击排行</h3>-->
<!--            </div>-->
<!--            <ul class="rank_list">-->
<!--                <li><span class="first">1</span><a href="#">势如破竹！人民币再度连闯四道关口 在岸、离岸双双升破6.42</a></li>-->
<!--                <li><span class="second">2</span><a href="#">凛冬已至，还有多少银行人在假装干银行</a></li>-->
<!--                <li><span class="third">3</span><a href="#">人民日报：部分城市楼市放松限制引关注，楼市调控不会“拉抽屉”</a></li>-->
<!--                <li><span>4</span><a href="#">势如破竹！人民币再度连闯四道关口 在岸、离岸双双升破6.42</a></li>-->
<!--                <li><span>5</span><a href="#">凛冬已至，还有多少银行人在假装干银行</a></li>-->
<!--                <li><span>6</span><a href="#">人民日报：部分城市楼市放松限制引关注，楼市调控不会“拉抽屉”</a></li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="footer">        -->
<!--        <div class="footer_links">-->
<!--            <a href="">关于我们</a>-->
<!--            <span>|</span>-->
<!--            <a href="">联系我们</a>-->
<!--            <span>|</span>-->
<!--            <a href="">招聘人才</a>-->
<!--            <span>|</span>-->
<!--            <a href="">友情链接</a>-->
<!--        </div>-->
<!--        <p class="copyright">-->
<!--            CopyRight © 2018 新经资讯信息技术有限公司 All Rights Reserved<br />-->
<!--电话：010-****888    京ICP备*******8号-->
<!--        </p>-->
<!--    </div>-->
<!--    -->
<!--    &lt;!&ndash; 登录表单 &ndash;&gt;-->
<!--    <form class="login_form_con">-->
<!--        <div class="login_form">-->
<!--            <div class="login_title">-->
<!--                <h3>登 录</h3>-->
<!--                <a href="javascript:;" class="shutoff"></a>-->
<!--            </div>-->
<!--            <div class="form_group">                -->
<!--                <input type="text" name="username" autocomplete="off">-->
<!--                <div class="input_tip">用户名/手机号</div>-->
<!--            </div>-->
<!--            <div class="form_group">                -->
<!--                <input type="password" name="password">-->
<!--                <div class="input_tip">密码(不少于6位)</div>-->
<!--            </div>-->
<!--            <input type="submit" name="" value="登 录" class="input_sub">-->
<!--            <div class="down_link">还没有账号？<a href="#" class="to_register">立即注册</a></div>-->
<!--        </div>-->
<!--        <div class="mask"></div>-->
<!--    </form>-->
<!--    -->
<!--    &lt;!&ndash; 注册表单 &ndash;&gt;-->
<!--    <form class="register_form_con">-->
<!--        <div class="register_form">-->
<!--            <div class="register_title">-->
<!--                <h3>注 册</h3>-->
<!--                <a href="javascript:;" class="shutoff"></a>-->
<!--            </div>-->
<!--            <div class="form_group">-->
<!--                <input type="text" name="mobile" autocomplete="off" id="register_mobile" class="phone_input">-->
<!--                <div class="input_tip">手机号</div>-->
<!--                <div id="register-mobile-err" class="error_tip">手机号不能为空</div>-->
<!--            </div>-->
<!--            <div class="form_group">-->
<!--                <input type="text" name="code_pwd" id="imagecode" class="code_pwd">-->
<!--                <div class="input_tip">图形验证码</div>-->
<!--                <img src="../../static/news/images/pic_code.png" class="get_pic_code" onclick="generateImageCode()">-->
<!--                <div id="register-image-code-err" class="error_tip">图形码不能为空</div>-->
<!--            </div>-->
<!--            <div class="form_group">-->
<!--                <input type="text" name="smscode" id="smscode" class="code_pwd">-->
<!--                <div class="input_tip">手机验证码</div>-->
<!--                <a href="javascript:;" class="get_code" onclick="sendSMSCode()">点击获取验证码</a>-->
<!--                <div id="register-sms-code-err" class="error_tip">验证码不能为空</div>-->
<!--            </div>-->
<!--            <div class="form_group">-->
<!--                <input type="password" name="password" id="register_password" class="pass_input">-->
<!--                <div class="input_tip">密码(不少于6位)</div>-->
<!--                <div id="register-password-err" class="error_tip">密码不能为空</div>-->
<!--            </div>-->
<!--            <div  class="form_group2 clearfix">-->
<!--                <input type="checkbox" class="agree_input" checked>-->
<!--                <p>同意使用条款，并已阅读"跟帖评论自律管理承诺书"</p>-->
<!--                <div class="error_tip">请勾选</div>-->
<!--            </div>-->
<!--            <input type="submit" name="" value="注 册" class="input_sub">-->
<!--            <div class="down_link">已有账号？<a href="javascript:;" class="to_login">立即登录</a></div>-->
<!--        </div>-->
<!--        <div class="mask"></div>-->
<!--    </form>-->
<!--</body>-->
<!--</html>-->